<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- basic styles -->
        <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../../assets/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../../assets/css/jquery-ui-1.10.3.custom.min.css" />
        <!-- ace styles -->
        <link rel="stylesheet" href="../../assets/css/ace.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="../../assets/css/ace-skins.min.css" />
        <style>
            strong{line-height: 28px;color:#307ecc}
            .box{border: 1px solid #cccccc; width: 97%;margin: 1%;margin-bottom: 20px;}
            .box strong {
                background-color: #ffffff;
                display: block;
                font-size: 16px;
                margin-left: 30px;
                margin-top: -13px;
                text-align: center;
                width: 110px;
                padding-bottom: 5px;
            }
            .device_static{border-bottom: 1px solid #cccccc;margin-bottom: 20px;}
        </style>
    </head>

    <body>
        <div class="main-container">
            <div class="page-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="tabbable">
                            <ul id="tabNav" class="nav nav-tabs">
                                <li class="active">
                                    <a href="javascript:gotoTab(1);">
                                        用户帐号
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:gotoTab(2);">
                                        链路ID
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:gotoTab(3);">
                                        IP地址段
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:gotoTab(4);">
                                        BRAS IP地址
                                    </a>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <button class="btn btn-small btn-primary" id="add">添加用户帐号</button>&nbsp;&nbsp;
                                <button class="btn btn-small btn-danger" id="multiDel">删除所选账号</button><br /><br />

                                <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>用户帐号</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div><!-- /span -->

                </div>

                <div class="row">
                    <div class="control-group col-sm-12" style=" margin-top: 10px;">
                        <div class="controls">
                            <a href="javascript:void(0)" class="btn btn-primary btn-small" onclick="previous()">&nbsp;返&nbsp;回&nbsp;</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>



        <!-- basic scripts -->

        <!--[if !IE]> -->

        <script src="../../assets/js/jquery.js"></script>
        <script src="../../assets/js/bootstrap.min.js"></script>
        <!-- ace scripts -->
        <script src="../../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="../../assets/js/jquery.dataTables.min.js"></script>
        <script src="../../assets/js/jquery.dataTables.bootstrap.js"></script>
        <script src="../../assets/js/jquery.validate.js"></script>
        <script src="../../assets/js/jquery.validate-util.js"></script>
        <script src="../../assets/js/Base64.js"></script>
        <script src="logic.js"></script>
        <script>
                                var gid = getQueryString("gid");
                                var instanceName = getQueryString("instanceName");
                                $(function () {
                                    $("#add").click(function () {
                                        addAccountDialog();
                                    });
                                    $("#multiDel").click(function () {
                                        delMultiAccount();
                                    });
                                    listUserfromAjax("../../action/dpium/group/adsl/list.do?groupId=" + gid);
                                    //listUserAccounts();
                                });

                                // ajax版本
                                function listUserfromAjax(url) {
                                    var checkbox = "<input type='checkbox'/>";
                                    var oper = '';
                                    oper += "<a class='red' href='javascript:void(0)' title='删除' '>";
                                    oper += "    <i class='icon-trash bigger-130'></i>";
                                    oper += "</a>";
                                    var oTable1 = $('#sample-table-2').dataTable({
                                        "aoColumns": [
                                            {"bSortable": false},
                                            {"bSortable": false},
                                            {"bSortable": false, "sDefaultContent": checkbox}
                                        ],
                                        "bFilter": false,
                                        "bSort": false,
                                        "bProcessing": true,
                                        "bServerSide": true,
                                        "sAjaxSource": url,
                                        "sAjaxDataProp": "aaData"
                                    });
                                }

                                // local版本
                                function listUserAccounts() {
                                    $.ajax({
                                        type: "GET",
                                        async: false,
                                        url: "",
                                        data: {},
                                        dataType: "json",
                                        success: function (data) {
                                            var data = [111];
                                            var aaData = [];
                                            for (var i in data) {
                                                var checkbox = "<input type='checkbox' value='" + data[i] + "'/>";
                                                var account = data[i];
                                                var oper = '';
                                                oper += "<a class='red' href='javascript:void(0)' title='删除' onclick='delAccountByAccount(\"" + account + "\")'>";
                                                oper += "    <i class='icon-trash bigger-130'></i>";
                                                oper += "</a>";
                                                aaData.push([checkbox, account, oper]);
                                            }

                                            var oTable1 = $('#sample-table-2').dataTable({
                                                "aoColumns": [
                                                    {"bSortable": false},
                                                    {"bSortable": false},
                                                    {"bSortable": false}
                                                ],
                                                "aaData": aaData
                                            });
                                            setInterval(function () {
                                                parent.$("#page-content").attr("height", $("html").height());
                                            }, 500);
                                        }
                                    });
                                }
                                function delMultiAccount() {
                                    var accounts = [];
                                    var r = confirm("确定删除所选帐号吗?");
                                    if (r !== true) {
                                        return;
                                    }
                                    $("#sample-table-2 tbody input:checked").each(function () {
                                        accounts.push($(this).parents("tr").find("td:eq(0)").html());
                                    });
                                    if (accounts.length === 0)
                                        return;

                                    var data = {
                                        groupId: gid,
                                        instanceName: instanceName,
                                        ids: accounts
                                    };
                                    $.ajax({
                                        type: "POST",
                                        aysnc: false,
                                        url: "../../action/dpium/group/adsl/delete.do",
                                        data: {json: JSON.stringify(data)},
                                        dataType: "json",
                                        success: function (resp) {
                                            if (resp.result==="true") {
                                                alert("删除成功！");
                                            }else{
                                                alert("删除失败！");
                                            }
                                            
                                            window.location.reload();
                                        }
                                    });
                                }
                               
                                //添加帐号弹窗
                                function addAccountDialog() {
                                    closeAccountDialog();
                                    var cont = '';
                                    cont += "<div id='modal-wizard' class='modal'>";
                                    cont += "            <div class='modal-dialog'>";
                                    cont += "                <div class='modal-content'>";
                                    cont += "                    <div class='modal-header' data-target='#modal-step-contents'>";
                                    cont += "                        <h3>帐号设置</h3>";
                                    cont += "                    </div>";
                                    cont += "                    <div class='modal-body step-content' id='modal-step-contents'>";
                                    cont += "                        <div class='' id='modal-step1'>";
                                    cont += "                            <div class='center'>";
                                    cont += "                                <form class='form-horizontal'>";
                                    cont += "                                    <div class='form-group'>";
                                    cont += "                                        <label for='Dev_Name' class='col-sm-3 control-label no-padding-right'>帐号名</label>";
                                    cont += "                                        <div class='col-sm-9'>";
                                    //cont += "                                            <input type='text' class='col-xs-8' id='name' name='1' required>";
                                    cont += "                                            <textarea class='col-xs-8 ascii' id='name' required></textarea>";
                                    cont += "                                        </div>";
                                    cont += "                                    </div>";
                                    cont += "                                    <div class='form-group'>";
                                    cont += "                                       <strong>提示</strong>：小于1000个不重复用户账号并换行分隔";
                                    cont += "                                    </div>";
                                    cont += "                                </form>";
                                    cont += "                            </div>";
                                    cont += "                        </div>";
                                    cont += "                    </div>";
                                    cont += "                    <div class='modal-footer wizard-actions'>";
                                    cont += "                        <button class='btn btn-success btn-sm btn-next save' data-last='完成 ' onclick='saveAccount()'>";
                                    cont += "                            完成";
                                    cont += "                            <i class='icon-ok'></i>";
                                    cont += "                        </button>";
                                    cont += "                        <button class='btn btn-danger btn-sm pull-left' data-dismiss='modal'>";
                                    cont += "                            <i class='icon-remove'></i>";
                                    cont += "                            取消";
                                    cont += "                        </button>";
                                    cont += "                    </div>";
                                    cont += "                </div>";
                                    cont += "            </div>";
                                    cont += "        </div>";
                                    $("body").append(cont);

                                    $('#modal-wizard').modal("show");
                                }
                                //关闭帐号弹窗
                                function closeAccountDialog() {
                                    $('#modal-wizard').modal("hide");
                                    $('#modal-wizard').remove();
                                }
                                //保存帐号
                                function saveAccount() {
                                    var form = $("#modal-step1 .form-horizontal").validate();
                                    if (form.form()) {
                                        var na = $("#name").val().split("\n");
                                        var names = [];
                                        for (var i = na.length - 1; i >= 0; i--) {
                                            if(na[i]!=""){
                                                names.push(na[i]);
                                            }
                                        };
                                        // console.log(names);
                                        var data = {
                                            groupId: gid,
                                            usernames: names
                                        };
                                        $.ajax({
                                            type: "POST",
                                            async: false,
                                            url: "../../action/dpium/group/adsl/create.do",
                                            data: {json: JSON.stringify(data)},
                                            dataType: "json",
                                            success: function (data) {
                                                if (data.result) {
                                                    alert("添加成功！");
                                                    closeAccountDialog();
                                                    window.location.reload();
                                                }
                                            }
                                        });
                                    }
                                }

                                //返回
                                function previous() {
                                    window.location = "userGroup-list.html?name=" + instanceName;
                                }

        </script>
    </body>
</html>
